import React, { Component } from 'react';
import Order from '../../containers/user/Order';
import LinkTitle from '../common/LinkTitle';
import { ACTIONSTATE } from '../../utils/constant';
import Button from 'react-uwp/Button';
import moment from 'moment';
import 'moment/locale/zh-cn';
import { Tabs, DatePicker } from 'antd';
const TabPane = Tabs.TabPane;
const { RangePicker } = DatePicker;
moment.locale('zh-cn');
export default class MyOrder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      orderNo: '',
      contactor: '',
      startDate: '',
      endDate: '',
      activeKey: 'all'
    };
  }
  componentDidMount() {
    const { location, getOrderList, datasource, filter } = this.props;
    let { activeKey } = this.state;
    if (location.state) {
      const { state } = location.state;
      activeKey = state.toString();
      this.setState({
        activeKey: activeKey
      });
    }

    if (!datasource) {
      getOrderList({ state: activeKey });
    } else {
      filter({ state: activeKey });
    }
  }
  orderValue = value => {
    this.setState({
      orderNo: value
    });
    if (!value) {
      this.search();
    }
  };
  concatValue = value => {
    this.setState({
      contactor: value
    });
    if (!value) {
      this.search();
    }
  };
  changeDate = (date, dateStr) => {
    this.setState({
      startDate: dateStr[0],
      endDate: dateStr[1]
    });
  };
  search() {
    const { orderNo, contactor, startDate, endDate, activeKey } = this.state;
    let params = { orderNo, contactor, startDate, endDate, state: activeKey };
    const { filter } = this.props;
    filter(params);
  }
  disabledDate = current => {
    return current && current > moment().endOf('day');
  };

  renderConditions = () => {
    const { orderNo, contactor } = this.state;
    return (
      <div className="condition">
        <label className="label">
          <span className="mr10">订单号</span>
          <input
            className="input"
            value={orderNo}
            onChange={e => this.orderValue(e.target.value)}
          />
        </label>
        <label className="label">
          <span className="mr10">联系人</span>
          <input
            className="input"
            value={contactor}
            onChange={e => this.concatValue(e.target.value)}
          />
        </label>
        <label className="label">
          <span className="mr10">预定日期</span>
          <RangePicker
            onChange={(date, dateStr) => this.changeDate(date, dateStr)}
            disabledDate={this.disabledDate}
          />
        </label>
        <Button className="searchBtn" onClick={() => this.search()}>
          搜索
        </Button>
      </div>
    );
  };
  changePane = key => {
    const { filter } = this.props;
    this.setState({
      activeKey: key
    });
    setTimeout(() => this.search());
  };
  action = item => {
    console.log(item);
  };
  render() {
    const { activeKey } = this.state;
    const { list } = this.props;
    let pagination = list && list.length > 10 ? true : false;
    return (
      <div className="userCWrapper myOrder">
        <div className="ltWrapper">
          <LinkTitle title="我的订单" />
        </div>
        {this.renderConditions()}
        <Tabs
          animated={{ inkBar: true, tabPane: false }}
          onChange={key => this.changePane(key)}
          activeKey={activeKey}
        >
          <TabPane tab="全部订单" key="all">
            <Order list={list} pagination={pagination} action={this.action} />
          </TabPane>
          <TabPane tab="待支付" key={ACTIONSTATE[0].type}>
            <Order list={list} pagination={pagination} action={this.action} />
          </TabPane>
          <TabPane tab="待出行" key={ACTIONSTATE[3].type}>
            <Order list={list} pagination={pagination} action={this.action} />
          </TabPane>
          <TabPane tab="待评价" key={ACTIONSTATE[1].type}>
            <Order list={list} pagination={pagination} action={this.action} />
          </TabPane>
        </Tabs>
      </div>
    );
  }
}
